<template>
  <div class="home">
    <div class="announcement">
      <span>最新公告：</span>
      <router-link :to="'/pedia/' + id">{{announcement}}</router-link>
    </div>
    <!-- 广告位 -->
    <home-ad :ads="ads1" ref="adAd"></home-ad>
    <!-- 第三方担保 -->
    <home-warrant></home-warrant>
    <!-- 火博头条 -->
    <home-top-line></home-top-line>
    <!-- 广告位 -->
    <home-ad :ads="ads2"></home-ad>
    <!-- 维权 -->
    <home-guarantee></home-guarantee>
    <!-- 热门娱乐城 -->
    <home-hot-casino></home-hot-casino>
    <!-- 底部导航 -->
    <home-bottom-nav></home-bottom-nav>
  </div>
</template>

<script>
import HomeAd from './components/Ad.vue';
import HomeWarrant from './components/Warrant.vue';
import HomeTopLine from './components/TopLine.vue';
import HomeGuarantee from './components/HotGuarantee.vue';
import HomeHotCasino from './components/HotCasino.vue';
import HomeBottomNav from './components/BottomNav.vue';

export default {
  name: 'Home',
  data() {
    return {
      id: '',
      announcement: '火博网新版上线',
      ads: [],
      plat: {
        company: 318,
        guarantee: 12,
        certification: 25
      }
    };
  },
  components: {
    HomeAd,
    HomeWarrant,
    HomeTopLine,
    HomeGuarantee,
    HomeHotCasino,
    HomeBottomNav
  },
  computed: {
    bottomNavList() {
      return [];
    },
    ads1() {
      return this.ads.slice(0, 4);
    },
    ads2() {
      return this.ads.slice(-1);
    }
  },
  created() {
    this.getAds();
  },
  methods: {
    getAds() {
      this.$api.getHomeAds().then(data => {
        this.ads = data;
      });
    }
  }
};
</script>

<style lang="less" scoped>
  .home {
    .announcement {
      line-height: 20px;
      margin-bottom: 10px;
      padding: 3px 10px;
      border: 1px solid #ddd;
      background-color: #fff;
      span {
        color: #666;
      }
      a {
        text-decoration: none;
        font-size: 12px;
        color: #888;
      }
    }
  }
</style>
